import React, { Component } from 'react';
import { connect } from 'umi'
import { Empty } from 'antd';
import ReactEcharts from 'echarts-for-react';
import { formatterUnitOfData, isValueEmpty } from '@/utils/utils'
import styles from '../index.less'

@connect(({ commerBuild }) => ({

}))
export default class GlobalDoughnut extends Component {
  constructor() {
    super()
  }

  /**
   * 将数组转化为指定字段{name: string,value: number}格式
   * @param {*} field 指定value字段
   * @param {*} dataRow 目标数组
   * @param {*} column 指定name字段
   */
  donutDataFormater = (field, dataRow = [], column = 'area_class') => {
    if(!dataRow) return []
    const result = []
    dataRow.forEach(item => {
      result.push({
        name: item[column],
        value: item[field]
      })
    })
    return result.sort((a, b) => a.value - b.value)
  }
  getOption = () => {
    const { name, dataRow = [], fieldName, column, staticts, radius = ['30%', '65%'] } = this.props
    const maxNumber = Math.max.apply(Math, dataRow && dataRow.map(item => { return item[fieldName] }))
    const minNumber = Math.min.apply(Math, dataRow && dataRow.map(item => { return item[fieldName] }))
    let option = {
      // backgroundColor: '#2c343c',

      tooltip: {
        trigger: 'item',
        formatter: item => {
          const {value, unit} = formatterUnitOfData(staticts, item.value)
          const template = `
          <div class=${styles.tooltip}>
            <p>${item.name}</p>
            <div class=${styles.content}>
                <span class=${styles.circle} style="background: ${item.color}"></span>
                ${item.seriesName}:
                <span class=${styles.amount}>
                  ${value + unit}(${item.percent}%)
                </span>
            </div>
          </div>
          `
          return template
        }
      },

      visualMap: {
        show: false,
        min: minNumber,
        max: maxNumber,
        inRange: {
          color: ['rgb(24, 183, 142)', 'rgb(1, 179, 238)', '#366bea'],
        }
      },
      series: [
        {
          name: name,
          type: 'pie',
          radius: radius,
          center: ['50%', '50%'],
          data: this.donutDataFormater(fieldName, dataRow, column),
          roseType: 'radius',
          label: {
            formatter: '{b}\n{d}%'
          },
          labelLine: {
            smooth: 0.2,
            length: 5,
            length2: 6
          },
          itemStyle: {
            // color: ['#00ffc4', '#9c8ff5', '#5543ce'],
            shadowBlur: 200,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },

          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return Math.random() * 200;
          }
        }
      ]
    }
    return option
  }

  // 获取echarts实例
  creatChartInstance = e => {
    // let currentIndex = -1
    // let myEcharts = e.getEchartsInstance()
    // setInterval(function () {
    //   var dataLen = 5;
    //   // 取消之前高亮的图形
    //   myEcharts.dispatchAction({
    //     type: 'downplay',
    //     seriesIndex: 0,
    //     dataIndex: currentIndex
    //   });
    //   currentIndex = (currentIndex + 1) % dataLen;
    //   // 高亮当前图形
    //   myEcharts.dispatchAction({
    //     type: 'highlight',
    //     seriesIndex: 0,
    //     dataIndex: currentIndex
    //   });
    // }, 3000);
  }
  render() {
    let echarts_react = null
    // let echarts_instance = this.state.echarts_react && this.state.echarts_react.getEchartsInstance()
    const { dataRow = [], fieldName } = this.props
    return (
      <div style={{ height: '100%', position: 'relative' }}>
        {isValueEmpty(fieldName, dataRow) ?
          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> :
          <ReactEcharts ref={this.creatChartInstance} style={{ height: '100%' }} option={this.getOption()} theme="Imooc" />
        }
      </div>
    )
  }
}
